<template>
	<view>
		<view class="content">
			<view class="login_from">
				<view class="login_from_input">
					<view class="login_from_name">手机号</view>
					<view class="login_from_fun"><input v-model="phone" type="text" placeholder="请输入手机号码"></view>
				</view>

				<view class="login_from_input">
					<view class="login_from_name">验证码</view>
					<view class="login_from_fun">
						<input v-model="code" style="width: 40%; text-align: left" type="digit" maxlength="6"
							placeholder="验证码">
						<label class="regFrom_tom_yzlabel" :style="{ color : QzyzmStare?'#cccccc':'#d1100b'}"
							@click="Qzyzm">{{Qztime}}{{Qztext}}</label>
					</view>
				</view>

				<view class="login_from_dl">
					<button @click="denglu" style="font-weight: 600; background-color:#D1100B;">微信绑定</button>
				</view>

				<!-- <view class="logo_xieyi">
					<checkbox-group @change="moutcl">
						<checkbox value="1" color="#d1100b" activeBorderColor="#d1100b"
							style="display: flex;justify-content: center;align-items: center;" />
					</checkbox-group>
					<view class="logo_text">我已阅读并同意<text @click="toCPage(1)">《服务协议》</text>和<text
							@click="toCPage(0)">《隐私政策》</text></view>
				</view> -->

			</view>

		</view>
	</view>
</template>

<script>
	const reg = /^1[345789]\d{9}$/; // 手机号正则
	export default {
		components: {
			// BackTabBar
		},
		data() {
			return {
				phone: '',
				code: '',
				password: '',
				gouxSta: true,
				Qztime: '',
				QzyzmStare: false,
				Qztext: '获取验证码',
				passwordShow: true,
				options: {},
				codeData: {}
			}
		},
		onLoad(options) {
			if (options.unionid) this.options = options
			else this.options = {}
			console.log('获取传入的UnionId', this.options)
		},
		methods: {
			// 跳转隐私协议webview页面
			// toCPage(e) {
			// 	uni.navigateTo({
			// 		url: '/pages/user/customerPage?Type=' + e
			// 	})
			// },
			// 协议选择
			// moutcl(e) {
			// 	if (e.detail.value.length > 0) {
			// 		this.gouxSta = true
			// 	} else {
			// 		this.gouxSta = false
			// 	}
			// },
			denglu() {
				// if (!this.gouxSta) return uni.showToast({
				// 	"title": "请阅读并勾选用户协议",
				// 	"icon": 'none'
				// })
				if (!reg.test(this.phone) || !this.code) return uni.showToast({
					icon: 'none',
					title: '请完善注册信息'
				})
				this.$http("Base_Manage/Home/AddVIPUserInfoData", {
					Phone: this.phone,
					SmsCode: this.code,
					...this.options,
					...this.codeData
				}).then(res => {
					if (res.Success) {
						uni.showToast({
							icon: 'none',
							title: '微信登录成功！'
						})
						uni.setStorageSync('userName', this.Phone)
						uni.setStorageSync('password', this.password)
						uni.setStorageSync('userInfo', res.Data)
						uni.setStorageSync('tokenKey', 'Bearer ' + res.Data.Token);
						uni.reLaunch({
							url: '/pages/TakePict/TakePict'
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.Msg
						})
					}
				})
			},
			async Qzyzm() {
				if (this.QzyzmStare == false) {
					console.log(this.phone);
					if (!reg.test(this.phone)) return uni.showToast({
						icon: 'none',
						title: '请检查您的手机号是否输入正确'
					})
					var num = 60;
					this.$http('Base_Manage/Base_SMSConfig/GetTemplateCodeByCode?code=' + 'ZYT_VIPUser_Register')
						.then(resData => {
							if (resData.Success) {
								this.$http("Base_Manage/Home/GetShortMessage?Phone=" + this.phone +
										"&TemplateCode=" + resData.Data)
									.then(res => {
										if (res.Success) {
											this.codeData = JSON.parse(res.Data)
											uni.showToast({
												icon: 'none',
												title: '短信发送成功'
											})
											this.Qztime = '60';
											this.Qztext = 's后获取';
											this.QzyzmStare = true;
											var interval = setInterval(() => {
												--this.Qztime
											}, 1000)
											setTimeout(() => {
												clearInterval(interval)
												this.Qztext = '获取验证码'
												this.Qztime = ''
												this.QzyzmStare = false
											}, 60000)
										} else {
											uni.showToast({
												icon: 'none',
												title: res.Msg
											})
										}
									})
							} else {
								uni.showToast({
									icon: 'none',
									title: resData.Msg
								})
							}
						})

				}
			},

		}
	}
</script>

<style>
	page {
		background: #fff;
	}

	.login_img {
		width: 100%;
		height: auto;
		margin-top: 90upx;
	}

	.login_img image {
		width: 170upx;
		height: 170upx;
		display: block;
		margin: 0px auto;
		border-radius: 50%;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20upx 8%;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
		font-size: 32rpx;
		font-weight: bold;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.login_from_fun input {
		width: 100%;
		text-align: left;
		font-size: 28rpx;
	}


	.login_from_dl {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		margin-top: 150upx;
	}

	.login_from_dl button {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		background: #66afff;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
		align-items: center;
		color: #444;
		font-size: 27rpx;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 26rpx;
		margin-right: 1%;
		display: block;
		width: 30rpx;
		height: 30rpx;
	}

	.cuIcon-squarecheckfill {
		color: #66afff;
	}

	.logo_text text {
		color: #d1100b;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #d1100b;
	}

	.cuicon {
		font-size: 18px;
	}

	.regFrom_tom_yzlabel {
		width: 160rpx;
		text-align: right;
	}

	.cuIcon-squarecheckfill {
		background: #d1100b;
		position: relative;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-square {
		background: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.regFrom_tom_yzlabel {
		width: 88px;
		text-align: center;
	}
</style>